<template>
	<view class="tui-centers">
		<tuiShareHead></tuiShareHead>
		<view class="tui-detail-swiper">
			<!--轮播图-->
			<view class="tui-banner-swiper" v-if="bannerShow">
				<swiper :autoplay="true" :interval="5000" :duration="150" :circular="true" @change="bannerChange"
					:style="{ height: scrollH + 'rpx' }">
					<block v-for="(img, imgIndex) in list" :key="imgIndex">
						<swiper-item :data-index="imgIndex">
							<image :src="img" class="tui-slide-image" @tap="previewImage(imgIndex)"/>
						</swiper-item>
					</block>
				</swiper>
				<tui-tag type="default" size="small" :text="bannerIndex+1 +'/'+ list.length "></tui-tag>
			</view>
			<!--视频-->
			<!--<view class="tui-detail-video" v-else>
				<video id="myVideo"
					:src="videos"
					@error="videoErrorCallback" controls
				></video>
			</view>-->
			<view class="tui-detail-tag">
				<!--<tui-tag :type="bannerShow ? 'default' : 'primary'" size="small" text="视频" @tap="bannerShow = !bannerShow"></tui-tag>-->
				<tui-tag :type="bannerShow ? 'primary' : 'default'" size="small" text="图片" @tap="bannerShow = !bannerShow"></tui-tag>
			</view>
		</view>
		
		<view class="tui-detail-box">
			<view class="tui-detail-title">
				<text>云谷田园生态农业小镇</text>
			</view>
			<view class="tui-loadmore-tips">
				<text>已售：1125 | 今日可定  |  一份起订</text>
				<text style="padding-left: 15rpx;color: #fdc844;font-size: 28rpx;">5.0分</text>
			</view>
			<view class="tui-loadmore-tips">
				<text>景区开放时间：8:00 - 21:00</text>
			</view>
			<view class="tui-flex">
				<view class="tui-detail-ellipse">
					<uni-icons type="map-pin-ellipse" color="#999" size="40"></uni-icons>
					<view class="tui-pd-left">江西省上饶市上饶县皂头镇云谷田园生态农业小镇</view>
				</view>
				<view @tap="goPage('/pagesA/instructions/instructions?boxShow=false')">
					<text class="tui-pd-right">预订须知</text>
					<uniIcons type="arrowright" color="#999" size="36"></uniIcons>
				</view>
			</view>
		</view>
		
		<view class="tui-detail-row">
			<view class="tui-ticket-admission">
				<view class="tui-ticket-detail" v-for="(item, index) in ticketList" :key="index">
					<view class="tui-tick-title">{{item.title}}</view>
					<view class="tui-operation-left">
						<view>退款无忧 | 已售{{item.sell}}</view>
						<view>
							<text style="color: #FE5B00;">￥</text>
							<text class="tuidetail-pric" style="font-weight: bold;">{{item.pic}}</text>
							<text style="color: #333;">起</text>
						</view>
					</view>
					<view class="tui-operation-left">
						<view style="color: red;" @tap="detailTo(item)">{{item.discount}}></view>
						<view class="tui-detail-btn">
							<button type="primary" shape="circle" size="mini" @tap="goPage('/pagesA/ticket/components/bookTicket?name=' + item.name + '&pric=' + item.pic)">预定</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="tui-detail-row">
			<view class="tui-cell-joint ">
				<text style="font-weight: bold;">多景点联票</text>
				<view style="font-size: 24rpx; color: #666666;">已售500+</view>
			</view>
			<view class="tui-ticket-admission">
				<view class="tui-ticket-detail" v-for="(item, index) in jointList" :key="index">
					<view class="tui-operation-left">
						<view class="tui-tack-left">
							<view class="tui-tick-title tui-pd-bottom">{{item.title}}</view>
							<view style="color: red;" @tap="detailTo(item)">{{item.discount}}></view>
							<!-- <view>退款无忧 | 已售{{item.sell}}</view> -->
						</view>
						<view>
							<view>
								<text style="color: #FE5B00;">￥</text>
								<text class="tuidetail-pric" style="font-weight: bold;">{{item.pic}}</text>
								<text style="color: #333;">起</text>
							</view>
							<view class="tui-detail-btn">
								<button type="primary" shape="circle" size="mini" @tap="goPage('/pagesA/ticket/components/bookTicket?name=' + item.name + '&pric=' + item.pic)">预定</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="tui-detail-row">
			<view class="tui-flex tui-space-between">
				<view >用户评价(135)</view>
				<view class="tui-operation-right" @tap="goPage('/pagesA/ticket/components/evaluate')">
					查看全部
					<uni-icons type="arrowright" color="#999" size="32"></uni-icons>
				</view>
			</view>
			<view class="tui-hot-content">
				<block v-for="(item,index) in hot" :key="index">
					<tui-tag type="default" circle class="tui-tag-text" :text="item"></tui-tag>
				</block>
			</view>
			<view class="tui-flex tui-space-between">
				<view class="tui-operation-image">
					<image src="../../../static/image/tabBar/card@2.png" mode=""></image>
					<view class="tui-operation-name">用户jq1321</view>
				</view>
				<view class="tui-operation-right">
					2020-12-14
				</view>
			</view>
			<view class="tui-comment-txt">
				<text>
					“树在水中生，水在林中流”是林正群海；蓝蓝的海子中一条绿色的颜色贯穿其中，像是一条龙，这就是卧龙海；在阳光的照射下海子泛起点点光，这是火花海；落日朗瀑布是最宽的瀑布，气势磅礴，让人叹为观止……
				</text>
			</view>
			<view style="padding: 20rpx;">
				<image v-for="(item, index) in list" :key="index" :src="item" mode=""
					class="tui-img-back" @tap="previewImage(index)"></image>
			</view>
			<view class="tui-whole-operation" @tap="goPage('/pagesA/ticket/components/evaluate')">
				<text>查看用户全部评价</text>
				<uni-icons type="arrowright" size="32" color="#666" style="padding-left: 10rpx;"></uni-icons>
			</view>
			<view class="tui-flex tui-space-between">
				<view >问大家(15)</view>
				<view class="tui-operation-right">
					查看全部
					<uni-icons type="arrowright" color="#999" size="32"></uni-icons>
				</view>
			</view>
			<view class="tui-flex tui-pad">
				<view class="tui-flex1">问</view>
				<view class="tui-flex2">现在去需要提前预约吗？</view>
				<view class="tui-flex3">3个回答</view>
			</view>
			<view class="tui-flex tui-pad">
				<view class="tui-flex1">问</view>
				<view class="tui-flex2">停车方便吗？</view>
				<view class="tui-flex3">3个回答</view>
			</view>
		</view>
		
		<gePopup
			v-if="isMask"
			:title="popupFrom.name"
			:money="popupFrom.pic"
			:content="popupFrom.conter"
			@eventClick="goPage" 
			@close="closeMask"
		></gePopup>

		<!-- 登录提示 -->
		<uni-login-model></uni-login-model>
	</view>
</template>

<script>
	import tuiTag from '@/components/uni-tag/uni-tag.vue'
	import tuiShareHead from '@/components/share-head/share-head.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import gePopup from '@/components/ge-popup/ge-popup.vue'
    import uniLoginModel from '@/components/uni-login-model/uni-login-model.vue'
	
	export default {
		name: 'ticketDetail',
		components: {
			tuiTag, tuiShareHead, uniIcons, gePopup, uniLoginModel
		},
		data() {
			return {
				isMask: false,
				bannerShow: true,
				bannerIndex: 0,
				scrollH: 480, //滚动总高度
				videos:'https://vd3.bdstatic.com/mda-kjnci6fewathsp40/v1-cae/mda-kjnci6fewathsp40.mp4',
				list: [],
				ticketList: [{
					title: '成人票', pic: 150, sell: 135, discount: '查看详情', name: '田园农业小镇-成人票',
					conter: '本票种：田园农业小镇成人票1张；入园时间：00:00-23:59；适用条件：18岁（不含） ~ 60周岁（不含）之间人群 '
				}, {
					title: '老人票', pic: 70, sell: 135, discount: '查看详情', name: '田园农业小镇-老人票',
					conter: '本票种：田园农业小镇成人票1张；入园时间：00:00-23:59；适用条件：18岁（不含） ~ 60周岁（不含）之间人群'
				}, {
					title: '儿童票', pic: 50, sell: 135, discount: '查看详情', name: '田园农业小镇-儿童票',
					conter: '本票种：田园农业小镇成人票1张；入园时间：00:00-23:59；适用条件：18岁（不含） ~ 60周岁（不含）之间人群'
				}, {
					title: '季票', pic: 500, sell: 135, discount: '查看详情', name: '田园农业小镇-季票',
					conter: '本票种：田园农业小镇成人票1张；入园时间：00:00-23:59；适用条件：18岁（不含） ~ 60周岁（不含）之间人群'
				}, {
					title: '年票', pic: 1000, sell: 135, discount: '查看详情', name: '田园农业小镇-年票',
					conter: '本票种：田园农业小镇成人票1张；入园时间：00:00-23:59；适用条件：18岁（不含） ~ 60周岁（不含）之间人群'
				},],
				jointList: [{
					title: '【成人】现代农业休闲区 + 乡居养生度假区 + 果林康乐养生区', pic: 280, discount: '查看详情', sell: 200, name: '田园农业小镇-景区联票',
					conter: '本票种：田园农业小镇成人票1张；入园时间：00:00-23:59；适用条件：18岁（不含） ~ 60周岁（不含）之间人群'
				}],
				hot: ['环境很好 58', '人气旺 46', '服务热情 31'],
				popupFrom: {
					pic: '',
					name: '',
					conter: ''
				},
                dataList: []
			}
		},
        onLoad(options) {
            // this.dataList = JSON.parse(options.list)
			// this.list = this.dataList.pics.split(',')
			console.log(this.list)
			this.getList(options.id)
		},
		methods: {
			getList(id) {
                uni.request({
                    url: `category/obj/get/${id}`,
                    method: 'GET',
                    header: {'content-type': 'application/json', 'Authorization': 'Bearer ' + uni.getStorageSync('token')},
                    success: (res) => {
                        console.log(res.data)
                        // this.list = res.data.data
                    },
                    fail: (res) => {
                        uni.showToast({ title: res.data.message, icon:'none' })
                    }
                })
			},
			bannerChange: function(e) {
				this.bannerIndex = e.detail.current;
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					// content: e.target.errMsg,
					content: '视频播放失败',
					showCancel: false
				})
			},
			previewImage:function(index){
				var i = this.list
				uni.previewImage({
					current: index,
					urls: i
				})
			},
			closeMask(){//关闭弹窗
				this.isMask = false;
			},
			goPage(url) {
				uni.navigateTo({
					url:url
				})
			},
			detailTo(item) {
				this.isMask = true
				this.popupFrom = item
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tui-centers {
		padding-bottom: 100rpx;
		background-color: #F3F3F3;
		line-height: 1.8;
		font-size: 28rpx;
	}
	.tui-detail-swiper {
		position: relative;
		.tui-banner-swiper {
			position: relative;
			background-color: #fff;
			.tui-slide-image {
				width: 100%;
				height: 100%;
				display: block;
				background-color: #fff;
			}
			.uni-tag {
				position: absolute;
				color: #fff;
				bottom: 54rpx;
				right: -4rpx;
				background: rgba(0, 0, 0, .7);
				border-radius: 30rpx 0 0 30rpx;
				border-color: rgba(0, 0, 0, .4);
				/deep/ .uni-tag--default {
					color: $uni-text-color-inverse;
				}
			}
		}
		.tui-detail-video {
			height: 480rpx;
			#myVideo {
				width: 100%;
				height: 480rpx;
			}
		}
		.tui-detail-tag {
			position: absolute;
			bottom: 18%;
			left: 8%;
			display: flex;
			z-index: 99;
			.uni-tag{
				margin: 0 10rpx;
			}
		}
	}
	
	.tui-detail-box {
		padding: 20rpx 30rpx;
		background-color: #fff;
		.tui-detail-title {
			font-size: 36rpx;
			font-weight: 600;
			color: #000000;
		}
		.tui-loadmore-tips {
			font-size: 24rpx;
			color: #999999;
		}
		.tui-flex {
			justify-content: space-between;
			color: #2F2F2F;
			padding: 20rpx 0;
			.tui-detail-ellipse {
				display: flex;
				width: 70%;
				border-right: 2rpx solid #eee;
				padding-right: 20rpx;
			}
		}
	}
	
	.tui-detail-row {
		margin-top: 30rpx;
		padding: 30rpx;
		background-color: #fff;
		.tui-cell-joint {
			font-size: 36rpx;
			padding-bottom: 20rpx;
		}
		.tui-ticket-admission {
			background-color: #F3F3F3;
			border-radius: 14rpx;
			.tui-ticket-detail {
				padding: 20rpx;
				border-bottom: 2rpx solid #eee;
				margin-bottom: 20rpx;
				line-height: 1.4;
				&:last-child {
					border-bottom: 0;
				}
				.tui-tick-title {
					font-size: 32rpx;
					color: #333;
				}
				.tui-operation-left {
					display: flex;
					justify-content: space-between;
					font-size: 26rpx;
					align-items: center;
					color: #666;
					.tuidetail-pric {
						font-size: 38rpx;
						color: #FE5B00;
					}
					.tui-detail-btn {
						uni-button {
							background-color: #FE5B00;
							font-size: 26rpx;
						}
					}
					.tui-tack-left{
						width: 65%;
					}
				}
			}
		}
		.tui-operation-right {
			color: #999;
		}
		.tui-hot-content {
			padding: 20rpx 0;
			.tui-tag-text {
				display: inline;
				margin-right: 10rpx;
				font-size: 22rpx;
				color: #666;
				padding: 8rpx 18rpx;
			}
		}
		.tui-operation-image {
			// width: 100rpx;
			// height: 100rpx;
			display: flex;
			align-items: center;
			uni-image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
			.tui-operation-name {
				padding-left: 15rpx;
				font-weight: bold;
			}
		}
		.tui-comment-txt {
			color: #666666;
			padding: 0 20rpx;
			max-height: 150rpx;
			overflow: hidden;
			word-break: break-all;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
		}
		.tui-img-back {
			width: 200rpx;
			height: 200rpx;
			border-radius: 15rpx;
			margin-right: 10rpx;
		}
		.tui-whole-operation{
			padding: 20rpx;
			text-align: center;
			border-top: 2rpx solid #eee;
			color: #666;
		}
		.tui-pad {
			padding-top: 10rpx;
			.tui-flex1 {
				width: 8%;
				text-align: center;
				background-color: #FE5B00;
				color: #fff;
				border-radius: 10rpx;
				font-size: 26rpx;
				padding: 6rpx 0;
			}
			.tui-flex2 {
				font-size: 26rpx;
				padding-left: 20rpx;
				flex: 1;
			}
			.tui-flex3 {
				width: 20%;
				font-size: 20rpx;
				color: #666666;
				text-align: right;
			}
		}
	}
	
</style>
